<template>
  <div class="uptemp">
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://schlkj.cn/YiShuPinServe/public/api/admin/uploadgoodsimg"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :file-list="fileList"
      accept='image/jpeg image/x-png'
      :auto-upload="false"
      :headers="Accept"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
    </el-upload>
  </div>

</template>
<script>
  export default {
    data() {
      return {
        fileList: [],
        fileimg:'',
        Accept:{ 'Content-Type':'image/jpeg',}
      }
    },
    mounted: function () {
      //加载完页面执行的函数
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
//        console.log(this.$refs.upload.submit())
      },
      handleRemove(file, fileList) {
//        console.log(file, fileList);
      },
      handlePreview(file) {
//        console.log(file);
      },
      handleChange(file, fileList){
        console.log(file);
        this.fileimg = file.url;
//        console.log(fileList);
      },
      fileupdate(e){
          console.log(e)
      },
      beforeUpload: function (file) {
//        console.log(file)
        //这里是重点，将文件转化为formdata数据上传
//        let fd = new FormData();
//        fd.append('file', file);
        this.http.post({
          'api': 'upload',
//          fd,
        'data':{
          "phone": '17311099173',
          "user_token": "$2y$10$IpuGfyyTIe4.I6aOFtp9lu9CEjdlzC3.mYhu7Mrnkdo5gUUyPY7z2",
          'goods_id':4,
          'Content-Disposition': 'form-data',

          'filename':file.name,
          'picture':this.fileimg
        }
        }).then((res) => {
          console.log(res)
        }, (err) => {

        });
        return false;
      }
    },
    components: {
//            组件
    }
  }
</script>
<style scoped>

</style>
<style>
  .uptemp .el-upload-list {
    position: absolute;
    left: 140px;
    top: 0;
    width: 50%;
  }

  .uptemp {
    position: relative;
  }

  .uptemp .el-upload-list .el-upload-list__item {
    margin-top: 0;
  }
</style>
